<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .wrap {
        width: 100%;
        height: 550px;
        overflow: hidden;
        position: relative;
      }

      .banner {
        width: 100%;
        height: 100%;
        position: absolute;
      }

      .banner > li {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        transition: all 0.8s linear;
      }

      .banner > li:nth-child(1) {
        z-index: 5;
        background: url(../img/defaultInteriorBackgroundBanner.jpg) center
          center/cover no-repeat;
      }

      .banner > li:nth-child(2) {
        z-index: 4;
        background: url(../img/img0.png) center center/cover no-repeat;
      }

      .banner > li:nth-child(3) {
        z-index: 3;
        background: url(../img/defaultInteriorBackgroundBanner.jpg) center
          center/cover no-repeat;
      }

      .banner > li:nth-child(4) {
        z-index: 2;
        background: url(../img/img0.png) center center/cover no-repeat;
      }

      .banner > li:nth-child(5) {
        z-index: 1;
        background: url(../img/defaultInteriorBackgroundBanner.jpg) center
          center/cover no-repeat;
      }

      /* 按钮调整 */
      .btn {
        width: 100%;
        height: 120px;
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -60px;
        z-index: 999;
        overflow: hidden;
        display: none;
      }

      .prev,
      .next {
        width: 60px;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.5);
        color: #17eb6f;
        text-align: center;
        line-height: 120px;
        float: left;
      }

      .next {
        float: right;
      }

      .wrap:hover .btn {
        display: block;
      }

      .prev:hover,
      .next:hover {
        background-color: rgba(255, 255, 255, 0.8);
      }

      /* 分页器 */
      .page {
        width: 150px;
        height: 20px;
        position: absolute;
        bottom: 30px;
        left: 50%;
        margin-left: -75px;
        z-index: 999;
        overflow: hidden;
      }

      .page > li {
        width: 20px;
        height: 20px;
        float: left;
        margin: 0 5px;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 20px;
        border-radius: 99999px;
        color: #fff;
      }

      .page > .active {
        background-color: red;
      }
    </style>
  </head>

  <body>
    <!-- 容器 -->
    <div class="wrap">
      <!-- 图片视口 -->
      <ul class="banner">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <!-- 点击按钮 -->
      <div class="btn">
        <div class="prev">左</div>
        <div class="next">右</div>
      </div>
      <!-- 分页器 -->
      <ul class="page">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>
    <script>
      //1、获取所需元素
      var lis = document
        .getElementsByClassName("banner")[0]
        .getElementsByTagName("li");
      console.log(lis); //
      console.log(lis[0]);
      //1-1、获取按钮
      var _prev = document.getElementsByClassName("prev")[0],
        _next = document.getElementsByClassName("next")[0];
      //1-2、获取分页器
      var pages = document
        .getElementsByClassName("page")[0]
        .getElementsByTagName("li");
      console.log(pages);
      //2、设置初始值
      var time1 = null; //控制渐变过程，每隔3000ms
      var time2 = null; //控制渐变过程0-1
      var bannerIndex = 0; //每一张图片的索引
      //3、封装一张图片的渐变过程
      function _run() {
        //3-1、把每一张图片设置为初始化(opacity:0)
        for (var i = 0; i < lis.length; i++) {
          lis[i].style.opacity = 0;
          //清除分页器的classname
          pages[i].className = "";
        }
        lis[bannerIndex].style.opacity = 1;
        pages[bannerIndex].className = "active";
        //3-2、设置需要改变的值
        var opt = 0; //opacity的初始值
        //3-3、设置定时器(控制渐变过程的定时器)
        clearInterval(time2); //设置定时器前，先清除（防止定时器循环调用）
        time2 = setInterval(function () {
          //改变opt的值
          opt += 0.05;
          //3-5、设置限定值(opt的取值0-1)
          if (opt >= 1) {
            //3-5-1、opt的最终值
            opt = 1;
            clearInterval(time2);
          }
          //3-6、每30ms赋值一次，来达到渐变过程的动画效果
          lis[bannerIndex].style.opacity = opt;
        }, 30);
      }
      //4、封装自动执行代码
      function _play() {
        //4-1、让索引自增(每张图片都要执行渐变过程)
        bannerIndex++;
        //4-2、设置bannerIndex的临界值
        if (bannerIndex >= lis.length) {
          //4-2-1、当bannerIndex到最后一张后，重新回到第一张
          bannerIndex = 0;
        }
        //4-3、调用一张图片的运动过程
        _run();
      }
      //6、给按钮绑定事件
      _prev.onclick = function () {
        //6-1、清除所有定时器
        clearInterval(time1);
        clearInterval(time2);
        //6-2、改变bannerIndex的值
        bannerIndex--;
        //6-3、设置限定值
        if (bannerIndex < 0) {
          bannerIndex = lis.length - 1;
        }
        //6-4、调用一张图片的运动过程
        _run();
        //6-5、不点击之后恢复自动走
        time1 = setInterval(_play, 3000);
      };
      _next.onclick = function () {
        //6-1、清除所有定时器
        clearInterval(time1);
        clearInterval(time2);
        //6-2、改变bannerIndex的值
        bannerIndex++;
        //6-3、设置限定值
        if (bannerIndex > pages.length - 1) {
          bannerIndex = 0;
        }
        //6-4、调用一张图片的运动过程
        _run();
        //6-5、不点击之后恢复自动走
        time1 = setInterval(_play, 3000);
      };
      //7、给每一个分页器绑定点击事件
      for (var i = 0; i < pages.length; i++) {
        pages[i].index = i;
        pages[i].onclick = function () {
          //7-1、this.index赋值给bannerIndex
          bannerIndex = this.index;
          clearInterval(time1);
          clearInterval(time2);
          _run();
          //6-5、不点击之后恢复自动走
          time1 = setInterval(_play, 3000);
        };
      }
      //5、自执行
      time1 = setInterval(_play, 3000);
    </script>
  </body>
</html>
